<template>
    <div class="login">
        <div class="form">
            <div class="title">
                <span>管理员登录</span>
            </div>
            <div class="opt">
                <div class="label">
                    <el-icon><User /></el-icon>
                </div>
                <div class="inpbox"><input type="text" v-model="user.account" placeholder="请输入账号/邮箱"></div>
            </div>
            <div class="opt">
                <div class="label">
                    <el-icon><Lock /></el-icon>
                </div>
                <div class="inpbox"><input type="password" v-model="user.password" placeholder="请输入密码"></div>
            </div>
            <div class="opt">
                <div class="label">
                    <el-icon><Picture /></el-icon>
                </div>
                <div class="inpbox"><input type="text" v-model="user.captcha" placeholder="请输入验证码"></div>
                <div class="vcode" @click="getVerify"><canvas ref="canvas"></canvas></div>
            </div>
            <div class="opt">
                <router-link to="/findpwd">忘记密码?</router-link>
            </div>
            <div class="opt">
                 <button class="btn" @click="singinFn">登录</button>
            </div>
        </div>
    </div>
</template>


<style lang="scss">
@import '../common/scss/variable.scss';
.login {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: skyblue;
    background-image: url(../common/img/bg2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    .form {
        width: 450px;
        border: 1px solid #f0f0f0;
        padding: 15px 20px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        .title {
            text-align: center;
            padding: 20px 0;
            span {
                display: inline-block;
                border-bottom: 2px solid $borderColor;
                padding: 10px 10px;
                color: $activeColor;
            }
        }
        .opt {
            width: 100%;
            display: flex;
            height: 42px;
            margin-bottom: 10px;
            .label {
                width: 50px;
                height: 40px;
                background-color: #f0f5ff;
                border: 1px solid #ccc;
                border-right: 0;
                flex-shrink: 0;
                text-align: center;
                line-height: 40px;
            }
            .inpbox {
                width: calc(100% - 50px);
                input {
                    font-size: 16px;
                    height: 40px;
                    line-height: 40px;
                    display: block;
                    border: 1px solid #ccc;
                    width: 100%;
                    padding-left: 10px;
                }
            }

            a {
                color: #666666;
                font-size: 15px;
            }
            .btn {
                width: 100%;
                height: 40px;
                background-color: $bgColor;
                font-size: 16px;
                color: #fff;
                cursor: pointer;
            }
            canvas {
                cursor: pointer;
                margin-left: 10px;
            }
        }
    }
}


</style>


<script setup lang="ts">
import { onMounted , ref  } from "vue"
import { ElMessage } from 'element-plus'
import api from '../api/index'
import { singin , test } from '../api/request'
import { useRouter } from 'vue-router'

// 定义变量 记录程序所需的数据
let canvas = ref<Element>()
let pen: any 
let w: number = 100
let h:number = 40
let host:string = api.url
// 记录表单信息
type U = {
    account: string
    password: string
    captcha: string
}
let user = ref<U>({
    account: "",
    password: "",
    captcha: "",
})

// 获取路由实例对象
const $router = useRouter();

// 编写登录函数
const singinFn = async ()=> {
    let {account , password ,captcha} = user.value;
    // console.log({account , password ,captcha})
    if(account && password && captcha) {
        // console.log(1)
        // 先验证码是否为机器人
        let isShow;
        await test({captcha})
        .then(
            content=> {
                // console.log(content);
                if(content.code == 200) {
                    // 执行登录逻辑
                    isShow = true;
                }
                else {
                    // 验证失败
                    ElMessage({
                        type: 'error',
                        message: content.msg
                    })
                }
            }
        )

        if(isShow) {
           // console.log({account , password, role: 1})
           // 执行登录逻辑
           await singin({account , password, role: 1})
           .then(
                content=>{
                     let {code, msg} = content;
                    //  console.log(content);
                    if(code == 200) {
                        let { nickName , token} = content;
                        // 本地存储缓存用户昵称、临时身份
                        localStorage.setItem('NICK_NAME', nickName)
                        localStorage.setItem('TOKEN', token)
                        // 登录成功
                        ElMessage({
                            type: 'success',
                            message: content.msg
                        })

                        // 延迟跳转首页
                        setTimeout(() => {
                            $router.replace({path: '/'})
                        }, 150);
                    }
                    else {
                        // 登陆失败
                        ElMessage({
                            type: 'error',
                            message: content.msg
                        })
                    }
                }
           )
        }

    }
    else {
        // console.log(2)
        ElMessage({
            type: 'error',
            message: "输入框不能为空",
        })
    }
}   


// 挂载钩子函数（初始化）
onMounted(()=>{
    let ele = canvas.value as any;
    let img = new Image();
    img.src = `${host}/api/verify/captcha`
    if(ele){
        ele.width = w;
        ele.height = h;
        pen = ele.getContext('2d');
        img.onload = ()=> {
            pen.drawImage(
                img,
                0,
                0,
                w,
                h
            )
        }
    }
})

// 点击获取验证码
const getVerify = () => {
    let img = new Image();
    img.src = `${host}/api/verify/captcha?${Math.random()}`;
    pen.clearRect(0,0,w,h);
    img.onload = ()=> {
        pen.drawImage(
            img,
            0,
            0,
            w,
            h
        )
    }
}

</script>
